<template>
  <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="visible" width="70vw" top="8vh">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="130px">
      <div class="boxsty">
        <el-row>
          <el-col :span="24">
          <el-col :span="8">
            <el-form-item label="发起名称" prop="faqiName">
              <el-input v-model="dataForm.faqiName" placeholder="发起名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="活动日期"  >
            <el-col :span="10">
              <el-date-picker v-model="dataForm.startdate" type="date" value-format="yyyy-MM-dd"
                              placeholder="开始日期" style="width: 100%"></el-date-picker>
            </el-col>
            <el-col :span="2">
              <div class="text-center">至</div>
            </el-col>
            <el-col :span="10">
              <el-date-picker v-model="dataForm.enddate" type="date" value-format="yyyy-MM-dd"
                              placeholder="活动截止日期" style="width: 100%"></el-date-picker>
            </el-col>
            </el-form-item>
          </el-col>
          </el-col>
          <el-col :span="16">
            <el-form-item label="有效期"  >
              <el-col :span="10">
                <el-date-picker v-model="dataForm.rwYxqq" type="date" value-format="yyyy-MM-dd" prop="rwYxqq"
                                placeholder="开始日期" style="width: 100%"></el-date-picker>
              </el-col>
              <el-col :span="2">
                <div class="text-center">至</div>
              </el-col>
              <el-col :span="10">
                <el-date-picker v-model="dataForm.rwYxqz" type="date" value-format="yyyy-MM-dd" prop="rwYxqz"
                                placeholder="结束日期" style="width: 100%"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>

        </el-row>
      </div>
    </el-form>
    <div style="height: 40vh;margin-top: 40px;overflow: auto">
      <el-row>
        <el-col :span="8">
          <div class="boxsty tree-box">
            <el-tree
              :data="treeOrgData"
              node-key="id"
              :props="defaultProps"
              @node-click="handleCheckChange">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="text-center">
            <el-table
              :data="confirmTreeData"
              border>
              <el-table-column
                prop="label"
                header-align="center"
                align="center"
                label="机构名称">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                  <el-button @click="delDeptList(scope.$index)" type="danger" plain size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  选择人员信息-->
    <UserCommonSelect ref="usercomment" @refreshDataList="getDataList"></UserCommonSelect>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="saveFormData">保存</el-button>
      <el-button type="primary" plain @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { selHzBmList } from '@/api/ceping/cepinghzgldxpzb'
import {getTreeData,saveRenwuFaQi} from '@/api/hetongrenwu/zhongdian/renwuchuangjian'
import UserCommonSelect from '@/views/hetongrenwu/components/usercomment-select'
import zhibiaoForm from '@/views/hetongrenwu/components/zhibiao-form.vue'

export default {
  components: {
    UserCommonSelect,
    zhibiaoForm
  },
  data() {
    return {
      xgBz: false,
      visible: false,
      canSubmit: false,
      cityOptions: [],
      jjData: [],//奖金池
      jjxList: [],//奖金项list
      fzbmData: [],
      dataForm: {},
      dataRule: {
        faqiName: [
          {required: true, message: '请输入发起名称', trigger: 'blur'}
        ],
        rwYxqq: [
          {required: true, message: '有效期开始日期不能为空', trigger: 'blur'}
        ],
        rwYxqz: [
          {required: true, message: '有效期结束日期不能为空', trigger: 'blur'}
        ],
        startdate: [
          {required: true, message: '开始日期不能为空', trigger: 'blur'}
        ],
        enddate: [
          {required: true, message: '结束日期不能为空', trigger: 'blur'}
        ]
      },
      zbvisible:false,
      treeOrgData:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      confirmTreeData:[],
      selectedTreeData:[],
    }
  },
  watch: {
  },
  methods: {
    //移除数据项
    removeItem(index) {
      this.dataForm.dataList.splice(index, 1);
      this.jjxZehj();
    },
    //初始化
    csh() {
      this.xgBz = false;
      this.jjxList = [];
      this.jjData = [];
      this.cityOptions = [];
      this.dataForm = {};
    },
    init(id) {
      this.csh();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.canSubmit = true;
      this.getTreeData();
    },
    //树结构选中的数据
    handleCheckChange(data){
      this.selectedTreeData=data;
      let objtree = {};
      objtree["label"] = data.name;
      objtree["id"] = data.id;
      var isHaveData=this.confirmTreeData.find(item=>item.id==data.id);
      if(!isHaveData){
        this.confirmTreeData.push(objtree);
      }
    },
    //删除人员list
    delDeptList(index) {
      this.confirmTreeData.splice(index, 1);
    },
    //确定选择选中得机构
    fnConfirmSelectedData(){
      this.confirmTreeData=this.selectedTreeData
    },
    getDataList(data) {
    
     //console.log('data:'+JSON.stringify(data))
      // selHzBmList('12').then(response => {
      //   this.itemData = response.data.data
      // })
    },
    //获取树结构
    getTreeData(){
      getTreeData().then(res=>{
        this.treeOrgData=res.data.data
      })
    },
    saveFormData(){
      this.dataForm.jigoujson=JSON.stringify(this.confirmTreeData);
      saveRenwuFaQi(this.dataForm).then(res=>{
        this.$message.closeAll();
        this.$message.success('保存成功')
        this.visible=false;
        this.$emit("refreshDataList")
      })
    },
    //增加人员
    addUser() {
      this.$nextTick(() => {
        this.$refs.usercomment.init('12');
      });
    },
    //打开指标维护
    fnOpenZhibiao(){
      var param={
        openZhi:true
      }
      this.$emit('openZhibiao',param)
    }
  }
}
</script>
<style scoped>
.el-divider {
  background-color: #fff
}
  .tree-box{
    height: 500px;
    overflow: auto;
  }
</style>
